<template>
  <div class="hello" id="app">
    <a-card title="文件名生成" :bordered="false">
      <span>
<!--        <a href="https://sspai.com/post/69524">参考：文件元数据命名法</a>-->
      </span>
      <a-descriptions>
        <a-descriptions-item label="例">
          001-(2021-11-11)颜文字皮肤(v2.1)#键盘#done&Nice，这是最终版了
        </a-descriptions-item>
      </a-descriptions>


      <a-form v-bind="formItemLayout">
        <a-row :gutter="24" type="flex" justify="start">


          <a-col :md="6" :sm="8">
            <a-form-item label="-前缀">
              <a-input placeholder="排序属性1 排序属性2" v-model="name.prefix" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">


            <a-form-item label="时间">

              <div id=dateId>
                <a-date-picker v-model="name.time" placeholder="选择日期" @change="dateChange"/>
              </div>
            </a-form-item>


          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="标题">
              <a-input placeholder="标题名称" v-model="name.title" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="v版本">
              <a-input placeholder="1.2.0" v-model="name.version" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="#标签">
              <a-input placeholder="标签1 标签2" v-model="name.label" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="@对象">
              <a-input placeholder="对象1 对象2" v-model="name.object" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="&备注">
              <a-input placeholder="备注1 备注2" v-model="name.comment" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="">
              <a-button type="danger" @click="clear_all">
                全部清空

              </a-button>

            </a-form-item>
          </a-col>

          <a-col :md="24" :sm="24">
            <a-button type="primary" @click="generate_filename"
                      v-clipboard:copy="filename"
                      v-clipboard:success="onCopy"
                      v-clipboard:error="onError"
            >生成文件名
            </a-button>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-descriptions>
              <a-descriptions-item label="">

                {{ filename }}

              </a-descriptions-item>
            </a-descriptions>
          </a-col>


        </a-row>


      </a-form>

    </a-card>
  </div>
</template>

<script>
import Vue from 'vue'
import {Button} from 'ant-design-vue';

Vue.use(Button)

export default {
  name: 'HelloWorld',
  data() {
    return {
      name: {
        prefix: '',
        time: '',
        title: '',
        version: '',
        label: '',
        object: '',
        comment: ''
      },
      filename: "",
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      },

    }
  },
  props: {
    msg: String
  },
  methods: {
    generate_filename() {
      var res = ""
      for (var val in this.name) {
        var res_sub = ""
        if (this.name[val] != "") {
          switch (val) {
            case 'time':
              res_sub = "(" + this.name[val] + ")"
              break
            case 'prefix':
              if (res_sub.length == 1) {
                res_sub = res_sub + '-'
              } else {
                res_sub = this.process_res_sub(this.name[val], '-')
                res_sub = res_sub.substring(1, res_sub.length) + '-'
              }
              break
            case
            'title':
              res_sub = this.name[val]
              break
            case
            'version'
            :
              res_sub = '(' + this.process_res_sub(this.name[val], 'v') + ')'
              break
            case
            'label'
            :
              res_sub = this.process_res_sub(this.name[val], '#')
              break
            case
            'object'
            :
              res_sub = this.process_res_sub(this.name[val], '@')
              break
            case
            'comment'
            :
              res_sub = this.process_res_sub(this.name[val], '&')
              break

          }
        }
        res = res + res_sub
      }
      this.filename = res
    },

    // str是传入的字符串，flag是标志符
    process_res_sub(str, flag) {
      var res = ""
      var str_dict = str.split(" ")
      for (var key in str_dict) {
        res = res + flag + str_dict[key]
      }
      return res
    },
    dateChange(date, dateString) {
      this.name.time = dateString
    },
    // 复制成功
    onCopy: function () {
      this.$message.success("复制成功！")
    },
    // 复制失败
    onError: function () {
      this.$message.error("复制失败！")
    },

    clear_all(){
      for (var val in this.name){
        this.name[val] = ""
        this.filename = ""
      }

    }


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#dateId {
  float: left;
}

#filename {
  width: 50%;
  margin: auto;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #3E81E0;
}
</style>
